// 方法一
// 导入路由相关函数
// import { createRouter,createWebHashHistory } from "vue-router";
// 组件加载方式是一次加载所有组件，除了这种方式外，还可以通过懒加载的方式动态加载组件
// 在router.js文件中导入需要被路由控制的Home组件和About组件
// import Home from './components/Home.vue'
// import About from './components/About.vue'

// 创建路由实例对象
// const router = createRouter({
//     history: createWebHashHistory(),
//     routes: [
//       { path: '/home', component: Home },
//       { path: '/about', component: About },
//     ]
//   })
  
// 在router.js文件中导出路由实例对象
// export default router

// 方法二
// 通过懒加载的方式动态加载组件
// 导入路由相关函数
import { createRouter,createWebHashHistory } from "vue-router";

const router = createRouter({
    history: createWebHashHistory(),
    routes:[
        {
            // 当用户访问“/”路径时，将路由重定向到“/home”路径
            path: '/', redirect: '/home'
            // 当用户访问“/”路径时，将路由重定向到“/movie”路径
            // path: '/', redirect: '/movie'
        },
        {
            path: '/home', component:() => import('../components/Home.vue')
        },
        {
            path: '/about', component:() => import('../components/About.vue'),
            // 导入Tab1组件和Tab2组件，并使用children属性定义子路由匹配规则
            children:[
                {
                    path: 'tab1', component:() => import('../components/pages/Tab1.vue')
                },{
                    path: 'tab2', component:() => import('../components/pages/Tab2.vue')
                }     
            ]
        },
        // {
        //     使用$route.params.id获取参数id的值
        //     path: '/movie', component:() => import('../components/Movie.vue'),
        //     children:[
        //         {
        //              path: ':id', component:() => import('../components/MovieDetails.vue')
        //           
        //         }
        //     ]
        // },
         // 为“:id”路径的路由开启props传参
        {
            path: '/movie', component:() => import('../components/Movie.vue'),
            children:[
                {
                    // { path: '路由路径', name: '路由名称', component: 组件 }
                    path: ':id', name: 'MovieDetails', component: () => import('../components/movieDetails.vue'), 
                    props: true
                }
            ]
             
        },
        {
            path: '/login', name: 'Login', component:() => import('../components/Login.vue')
        }
          
    ]
    
})
// 注册全局导航守卫
router.beforeEach((to, from, next) => {
     let isLogin = false
     if (to.name == 'MovieDetails') {
     if (isLogin) { next()
     } else {
      next({ name: 'Login' })
     }
     } else { next() }
    })
    
  export default router
  

